<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<!--用于解决springboot ajax 提交403错误的错误。  -->
<meta name="_csrf" th:content="${_csrf.token}"/>
<meta name="_csrf_header" th:content="${_csrf.headerName}"/>

<title>借还书记录查询</title>
<!-- Bootstrap core CSS -->
<link href="asserts/css/bootstrap.min.css"
	th:href="@{/webjars/bootstrap/css/bootstrap.css}" rel="stylesheet">

<!-- Custom styles for this template -->
<link th:href="@{/asserts/css/dashboard.css}" rel="stylesheet">
<script type="text/javascript" src="asserts/js/jquery-3.2.1.slim.min.js"
	th:src="@{/webjars/jquery/jquery.js}"></script>
<script type="text/javascript" src="asserts/js/bootstrap.min.js"
	th:src="@{/webjars/bootstrap/js/bootstrap.js}"></script>

</head>

<body>
	<!--引入抽取的topbar-->
	<!--模板名：会使用thymeleaf的前后缀配置规则进行解析-->
	<div th:replace="commons/bar::topbar"></div>

	<div class="container-fluid">
		<div class="row">
			<!--引入侧边栏-->
			<div th:replace="commons/bar::#sidebar(activeUri='finedeal')"></div>

			<main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
            <h3 class="text-center text-primary">图书借阅罚款缴纳处理</h3>  
            <div class="row"> 
			<label for="readerid"  class=" control-label">读者的借书证号：</label> 
			<!-- 用户输入的用户ID作为罚款对象 -->
			<input class="form-control  col-xs-4 col-sm-4 col-md-3 col-lg-2" required="required"	autofocus="autofocus" id="Userid"  name="User.id" type="text" > 
			<input type="button" id="query_btn"	class="btn  btn-success" onclick="getfine();" value="读取">
			</div>
			<br />
			 &nbsp;读 &nbsp;者 &nbsp;姓 &nbsp;名 &nbsp;：<mark id="username"></mark>
			<br/><br>
			<div class="table-responsive">
				<table class="table table-striped table-sm">
					<thead>
						<tr>
							<th>罚款流水号 </th>
							<th>被罚款人</th>
							<th>罚款金额</th>
							<th>罚款原因</th>
							<th>是否处理完</th>
							<th>处理时间</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody>
					
					</tbody>
				</table>
			</div>
			</main>
		</div>
	</div>

	<!-- Bootstrap core JavaScript
    ================================================== -->
	<!-- Placed at the end of the document so the pages load faster -->

	<script type="text/javascript">
	
	var readerids = [];
	
	//---用于解决springboot ajax 提交403错误
	var token = $("meta[name='_csrf']").attr("content");
	var header = $("meta[name='_csrf_header']").attr("content");
	$(document).ajaxSend(function(e, xhr, options) {
	    xhr.setRequestHeader(header, token);
	});
	//---结束
		
	//得到读者目前未处理的所有罚单	
    function getfine(){
       
       var userid=$("#Userid").val();
    
       $.get("/reader/" + userid, 
				 function(data){
					 if(data.id=="0000"){
						 alert("警告: 该读者不存在！");
						 $("#Userid").val("");
					 }
					 else{
						 $("#username").html(data.name);
					 }
		 });
	
		 
		 if(readerids.indexOf(userid) !=-1) 
			 {
			 alert("该读者的罚款信息已经检索显示！");
			 return ;
	         }
		 else readerids.push(userid);
		 
		$.get("/bookfine/readerid/" + userid, 
			 function(data){
			     if(data==null){
					 alert("提示： 查不到该读者的逾期罚款未处理记录！" );	 
				 }
				 else
				 {
						for(var i = 0;i<data.length;i++){  //循环LIST
							
					var t='<tr><td>'
					       + data[i].id + '</td> <td>'
					       + data[i].userName +'</td> <td>'
					       + data[i].amount +' </td> <td>'
					       + data[i].finetype +' </td> <td>'
					       + "未处理" + '</td> <td>'
					       + "" +'</td> <td>'
					       + '<button type="button" class="btn btn-sm btn-info" onclick="dealFine(this,'+data[i].id+');">处理完结</button>'
					       + '</td></tr>';

					 $("tbody").append(t);
					 } 
				}
			 });
	    };
	    
	    //根据一个订单流水号，处理完结订单
	    function dealFine(obj,fineid){
	    	$.post("/bookfine/deal/" + fineid, 
	   			 function(data){
	   					alert(data);
	   					//删除自身行
	   					var tr=obj.parentNode.parentNode;
	   					tr.parentNode.removeChild(tr);
	   				 }
	    	);
	    };
	</script>
</body>
</html>